<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="/static/css/style.css" />
    <title>Document</title>
</head>
<body>
    <div id="box"></div>
    <button id="btn1">get</button>
    <button id="btn2">post</button>
    <p>{{name}}今年{{age}}岁了，喜欢{{like}}</p>

    <!-- 引入模板include -->
    {% include "./common.html" %}

    <!-- 模板引擎if判断 -->
    {% if name %}
    <p>欢迎{{name}}</p>
    {% else %}
    <p>请登录</p>
    {% endif %}

    {% if boxif==1 %}
    <p>一个{{name}}</p>
    {% elseif boxif==2 %}
    <p>两个{{name}}</p>
    {% elseif boxif==3 %}
    <p>三个{{name}}</p>
    {% endif %}
    
    <!-- for遍历 -->
    <ul style="border: 1px solid #ccc">
        <p>for遍历</p>
        {% for item in arr %}
        <li>{{item}}</li>
        {% endfor %}
    </ul>

    <!-- set 设置临时变量 -->
    {% set arr=["李四",28] %}
    {% set a=123 %}
    <p>{{arr[0]}}今年{{arr[1]}}，a的值：{{a}}</p>

</body>
</html>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script src="/static/js/main.js"></script>
<script>
    $("#btn1").click(function(){
        $.ajax({
            url:"/api/login?username=zhangsan&password=123456",
            method:"GET",
            success:function(data){
                console.log(data)
            },
            error:function(error){
                console.log(error)
            }
        });
    })
    
    $("#btn2").click(function(){
        $.ajax({
            url:"/api/login",
            method:"POST",
            data:{
                username:"zhangsan",
                password:123456
            },
            success:function(data){
                console.log(data)
            },
            error:function(error){
                console.log(error)
            }
        });
    })
</script>